<template>
	<view class="container">
		<view class="head-user">
		<!-- 	<u-navbar placeholder bgColor="transparent" leftIconColor="#FFFFFF"
			  :rightText="$t('loginPage.choice')" @rightClick="hanldeChoice">
			</u-navbar> -->
			<view class="choice" @click="hanldeChoice">{{$t('loginPage.choice')}}</view>

			<view class="user-info">
				<image src="/static/image/avatar_ai.png" mode="" />
				<view class="flex-direction">
					<text class="font-32 color-fff">{{store.userInfo.nickname}}</text>
					<text class="font-32 color-fff">UID：{{store.userInfo.id}}</text>
					<view class="flex align-center">
						<view class="invitation-code font-24 color-fff">{{$t('my.invitation_code')}}</view>
						<text class="font-24 color-fff">{{store.userInfo.invite_code}}</text>
						<image class="copy" @click="handCopyInvitationCode(store.userInfo.invite_code)"
							src="/static/image/copy.png" mode="" />
					</view>
				</view>
			</view>

			<view class="menu-cell">
				<view class="menu-cell-box">
					<view class="font-56">{{store.userInfo.balance}} <text class="font-24">USDT</text></view>
					<text>{{$t('my.my_wallet_balance')}}</text>
				</view>
				<view class="menu-cell-box">
					<view class="font-56">{{store.userInfo.frozen_balance}} <text class="font-24">USDT</text></view>
					<text>{{$t('my.freeze_principal')}}</text>
				</view>

				<view class="giad">
					<view class="giad-cell">
						<text class="font-24">{{$t('my.accumulated_personal_income')}}</text>
						<text class="font-40">{{income.total || "0"}}</text>
					</view>
					<view class="giad-cell">
						<text class="font-24">{{$t('home.today_personal_income')}}</text>
						<text class="font-40">{{income.total_today || "0"}}</text>
					</view>
					<!-- 	<view class="giad-cell mar-top-45">
						<text class="font-24">{{$t('my.accumulated_income_commission_rebates')}}</text>
						<text class="font-40">0</text>
					</view> -->
				</view>

				<view @click="jumpRobotProduct" class="check-cell flex align-center">
					<image src="/static/image/avatar_ai.png" mode=""></image>
					<text class="font-26">{{$t('my.robot_warehouse')}}</text>
					<view class="flex align-center arrow-circular">
						<u-icon name="arrow-right" color="#000000" size="12"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view class="content">
			<view @click="jumpRobotProduct" class="miner color-fff font-30">
				<image src="/static/image/avatar_ai.png" mode="" />
				<text class="mar-right-10">{{$t('my.you_currently_have')}} </text> {{productList.length}} <text
					class="mar-left-10">
					{{$t('my.the_robot_working')}}</text>
			</view>
		</view>

		<view class="mar-top-30 pad-left-25 pad-right-25 pad-bottom-40">
			<ModuleCell @handModal="visibleModal = true" />
			<!-- #ifdef H5 -->
			<view class="mar-top-30">
				<u-button @click="handDowmload" color="#FFFFFF" :customStyle="customStyle"
					:text="$t('my.app_owmload')"></u-button>
			</view>
			<!-- #endif -->
			<view class="mar-top-30">
				<u-button color="#FFFFFF" :customStyle="customStyle" :text="$t('my.log_out')"
					@click="quitVisisbel = true"></u-button>
			</view>
		</view>
		<up-modal :show="quitVisisbel" :title="$t('home.kind_reminder')" :content="$t('my.want_exit_current_login')"
			:cancelText="$t('my.cancel')" :confirmText="$t('confirm')" showCancelButton @cancel="quitVisisbel = false"
			@confirm="handConfirm"></up-modal>
		<SecurityModal :show="visibleModal" @close="visibleModal = false" :user="store.userInfo" />

		<!-- <custom-tabbar :value="1" /> -->
		<robot></robot>
	</view>
</template>

<script setup>
	import CustomTabbar from '@/components/custom-tabbar/index.vue'
	import ModuleCell from './components/module-cell/index.vue'
	import SecurityModal from './components/security-modal/index.vue'
	import {
		ref
	} from 'vue'
	import {
		useI18n
	} from 'vue-i18n'
	import {
		onLoad,
		onHide,
		onShow
	} from '@dcloudio/uni-app'
	import {
		robotIncome,
		getSetting
	} from '@/api/index'
	import {
		userInfo,
		pledgeRobotAllOfOwner
	} from '@/api/user'
	import {
		useStore
	} from '@/store/commonStore'

	const store = useStore()
	const {
		t
	} = useI18n()
	const customStyle = {
		color: '#EE9900',
		borderRadius: '20rpx',
		boxShadow: '0 1.2077vw 10rvw rgba(75, 98, 157, .11)'
	}
	const quitVisisbel = ref(false) // 退出登录模态框
	const visibleModal = ref(false)
	const productList = ref([])
	const income = ref({}) // 收益信息
	// 切换语言
	const hanldeChoice = () => {
		uni.navigateTo({
			url: '/pages/locale/locale'
		})
	}

	const jumpRobotProduct = () => {
		uni.navigateTo({
			url: '/pages/my_actions/robot-product/robot-product'
		})
	}

	const handCopyInvitationCode = (content) => {
		if (!content) return;
		uni.setClipboardData({
			data: content,
			success: () => {
				uni.$u.toast(t('my.copy_successful'))
			}
		})
	}

	// 获取收益
	const getRobotIncome = async () => {
		const res = await robotIncome()
		income.value = res.data
	}

	// 获取用户信息
	const getUserInfo = async () => {
		const res = await userInfo()
		store.userInfo = res.data.info
	}

	const handConfirm = () => {
		uni.removeStorageSync('token');
		uni.removeStorageSync('noticeId');
		uni.reLaunch({
			url: '/pages/login/login'
		});
		uni.$u.toast(t('my.successfully_exited'));
	}
	// 获取启动的机器人
	const getData = async () => {
		const res = await pledgeRobotAllOfOwner({
			start_status: 1,
			valid_seconds_now_gt: 0
		})

		productList.value = res.data.lists
	}

	// 获取APP下载地址
	const handDowmload = async () => {
		const res = await getSetting({
			codes: ['app_dowmload']
		})
		
		// #ifdef APP-PLUS
		plus.runtime.openURL(res.data.setting.app_dowmload);
		// #endif
		
		// #ifdef H5
		window.location.href = res.data.setting.app_dowmload;
		// #endif
	}

	onShow(() => {
		getUserInfo()
		getRobotIncome()
		getData()
	})

	onHide(() => {
		visibleModal.value = false
	})
</script>

<style lang="scss" scoped>
	:deep(.u-modal__content__text) {
		text-align: center;
	}

	.container {
		height: auto;

		.head-user {
			background: #0fbc96;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				width: 750rpx;
				left: 0;
				bottom: 0;
				height: 117.8rpx;
				background: url('/static/image/arc_angle.png') no-repeat;
				background-size: 100% 100%;
			}

			.choice {
				padding: 25rpx;
				text-align: right;
				color: #FFFFFF;
				font-size: 28rpx;
				/* #ifdef APP-PLUS */
				padding-top: 44px !important;
				/* #endif */
			}

			.user-info {
				display: flex;
				align-items: center;
				padding: 0 25rpx;
				box-sizing: border-box;

				image {
					width: 106rpx;
					height: 106rpx;
				}

				.flex-direction {
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					gap: 8rpx;

					.invitation-code {
						padding: 4rpx 10rpx;
						background: rgba(53, 80, 140, .5);
						border-radius: 20rpx;
						margin-right: 15rpx;
					}

					.copy {
						margin-left: 10rpx;
						width: 15px;
						height: 15px;
					}
				}
			}

			.menu-cell {
				margin: 0 25rpx;
				margin-top: 40rpx;
				padding: 0 3.8647vw;
				padding-bottom: 9.6618vw;
				border-radius: 4.8309vw;
				background: linear-gradient(180deg, #f7ffff, #caffff);



				.menu-cell-box {
					padding: 2.8986vw 0;
					font-size: 2.8986vw;
					border-bottom: 1rpx solid rgba(114, 77, 29, .1);
				}

				.giad {
					margin-top: 45rpx;
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex-wrap: wrap;

					.giad-cell {
						width: 50%;
						gap: 8rpx;
						display: flex;
						flex-direction: column;
					}
				}

				.check-cell {
					position: relative;
					margin-top: 40rpx;
					margin-bottom: 15rpx;
					justify-content: center;
					padding: 2.9986vw 3.8647vw;
					padding-left: 13.5266vw;
					border-radius: 11.8357vw;
					background: #0fbc96;
					box-shadow: 0 1.2077vw 4.8309vw rgba(59, 72, 92, .31);

					image {
						position: absolute;
						left: 0;
						width: 43.15px;
						height: 43.15px;
					}

					text {
						flex: 1;
					}

					.arrow-circular {
						justify-content: center;
						width: 20px;
						height: 20px;
						background: #FFFFFF;
						border-radius: 50%;

					}
				}
			}
		}

		.content {
			padding: 0 35rpx;
			box-sizing: border-box;
		}

		.miner {
			padding: 0 25rpx;
			margin-top: 20rpx;
			width: 100%;
			height: 117.8rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			background: url('/static/image/miner.png') no-repeat;
			background-size: 100% 100%;
			box-sizing: border-box;

			image {
				margin-right: 25rpx;
				width: 74.3rpx;
				height: 74.3rpx;
			}
		}
	}
</style>